<template>
  <div class="container">
    <van-nav-bar title="我的记录" left-text="返回" right-text left-arrow @click-left="onClickLeft"/>
    <van-tabs v-model="active1" @change="tabChange">
      <van-tab title="已预约">
        <div v-if="appointmentList.list&&appointmentList.list.length>0">
        <van-pull-refresh v-model="isLoading1" @refresh="onRefresh1">
          <van-list v-model="loading1" :finished="finished1" finished-text="没有更多了" @load="onLoad1">
            <div class="content" v-for="(item,index) in appointmentList.list" :key="index" @click="toRentalDdetails(item.id)">
              <div class="top">
                <div class="img">
                  <img :src="item.image_url" alt>
                </div>
                <div class="right_info">
                  <p class="name">{{item.name}}</p>
                  <p class="durable_year">￥{{item.goods_format[0].rental_price}}/年</p>
                  <p class="area">
                    整体面积:
                    <span>{{item.goods_format[0].all_area}}平米</span>
                  </p>
                </div>
              </div>
              <div class="bottom">最新时间：{{item.create_time}}</div>
            </div>
            
          </van-list>
        </van-pull-refresh>
        </div>
        <div class="empty" v-else>暂无数据</div>
      </van-tab>
      <van-tab title="已租赁">
        <div v-if="leaseList.list&&leaseList.list.length>0">
        <van-pull-refresh v-model="isLoading2" @refresh="onRefresh2">
          <van-list v-model="loading2" :finished="finished2" finished-text="没有更多了" @load="onLoad2" :immediate-check="isCheck">
            <div class="content" v-for="(item,index) in leaseList.list" :key="index" >
              <div class="top">
                <div class="img">
                  <img :src="item.image_url" alt>
                </div>
                <div class="right_info">
                  <p class="name">{{item.name}}</p>
                  <p class="durable_year">￥{{item.goods_format[0].rental_price}}/年</p>
                  <p class="area">
                    整体面积:
                    <span>{{item.goods_format[0].all_area}}平米</span>
                  </p>
                </div>
              </div>
              <div class="bottom">最新时间：{{item.create_time}}</div>
            </div>
          </van-list>
        </van-pull-refresh>
        </div>
        <div class="empty" v-else>暂无数据</div>
      </van-tab>
      <van-tab title="我的出租" dot>
        <div v-if="myRentList.list&&myRentList.list.length>0">
        <van-pull-refresh v-model="isLoading3" @refresh="onRefresh3">
          <van-list v-model="loading3" :finished="finished3" finished-text="没有更多了" @load="onLoad3" :immediate-check="isCheck">
            <div class="content rent" v-for="(item,index) in myRentList.list" :key="index" >
              <div class="top">
                <div class="img">
                  <img :src="item.image_url" alt>
                </div>
                <div class="right_info">
                  <div class="name_b">
                    <p class="name">{{item.name}}</p>
                    <button :class="item.count==0?'fished':''" @click="leaseOver(item.id)">结束租赁</button>
                  </div>

                  <p class="durable_year">￥{{item.goods_format[0].rental_price||0}}/年</p>
                  <div class="all_area">
                    <p class="area">
                      整体面积:
                      <span>{{item.goods_format[0].all_area||0}}平米</span>
                    </p>
                    <p class="area">
                      土地年限:
                      <span>{{item.goods_format[0].land_age||0}}年</span>
                    </p>
                  </div>
                  <p class="new_time">最新时间：{{item.create_time}}</p>
                </div>
              </div>
              <div class="bottom rent" v-if="item.hasOrder">
                <span>请求预见/请求租赁</span>
                <span @click="toRecordDetails(item.id)">
                  查看详情
                  <i class="van-icon van-icon-arrow van-cell__right-icon"></i>
                </span>
              </div>
            </div>
          </van-list>
        </van-pull-refresh>
        </div>
        <div class="empty" v-else>暂无数据</div>
      </van-tab>
    </van-tabs>
    <!-- <van-tabbar v-model="active" active-color="#01bf47">
      <van-tabbar-item to="/farmLease">
        <span>农庄列表</span>
        <img slot="icon" slot-scope="props" :src="props.active ? icon.active1 : icon.normal1">
      </van-tabbar-item>
      <van-tabbar-item>
        <span>发布出租</span>
        <img slot="icon" slot-scope="props" :src="props.active ? icon.active2 : icon.normal2">
      </van-tabbar-item>
      <van-tabbar-item to="/myReward">
        <span>我的记录</span>
        <img slot="icon" slot-scope="props" :src="props.active ? icon.active3 : icon.normal3">
      </van-tabbar-item>
    </van-tabbar> -->
  </div>
</template>

<script>
export default {
  name: "myReward",
  data() {
    return {
      active1: 0,
      active: 2,
      icon: {
        normal1: require("../assets/images/zky_icon.png"),
        active1: require("../assets/images/zky_icon11.png"),
        normal2: require("../assets/images/zky_icon2.png"),
        active2: require("../assets/images/zky_icon22.png"),
        normal3: require("../assets/images/zky_icon3.png"),
        active3: require("../assets/images/zky_icon33.png")
      },
      user_id: "",
      appointmentList: {},
      l_appointmentList: [],
      leaseList: {},
      l_leaseList: [],
      myRentList: {},
      l_myRentList: [],
      isLoading1: false,
      isLoading2: false,
      isLoading3: false,
      loading1: false,
      loading2: false,
      loading3: false,
      finished1: false,
      finished2: false,
      finished3: false,
      pageNum1: 1,
      pageNum2: 1,
      pageNum3: 1,
      isCheck:false,
    };
  },
  mounted() {
    var token = this.$cookies.get('token')||localStorage.getItem('token');
      let u = navigator.userAgent;
            let isAndroid = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1; //android终端
            let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
            let message={
                orderId:this.orderId,
                formData:this.formData
            }

        if (!token) {
             if (isAndroid) {
                console.warn('ecologylogin');
              } else if (isiOS) {
                window.webkit.messageHandlers.goBackLogin.postMessage(null);
              }
        };
      if (isAndroid) {
         console.warn('title:我的记录');//andriod监听方法，勿删除
      } else if (isiOS) {
         
      }
   
    if (this.$cookies.get("active") != null) {
      this.active1 = this.$cookies.get("active");
      this.$cookies.remove("active");
    } else {
      this.active1 = 0;
    }
    this.user_id = this.$cookies.get("user_id")||localStorage.getItem('user_id');
    this.getAppointmentList();
  },
  methods: {
    toRentalDdetails(id){
      this.$router.push({
        path: "/rentalDdetails",
        query: {
          product_id: id
        }
      });
    },
    onClickLeft() {
      console.warn('finish');
       window.webkit.messageHandlers.goBackApp.postMessage(null); 
    },
    //tab切换
    tabChange(index, title) {
      // if (this.tabList[index].id) {
      //   this.typeId = this.tabList[index].id;
      // } else {
      //   this.typeId = "";
      // }

      if (title == "已预约") {
        this.l_appointmentList = [];
        this.pageNum1 = 1;
        this.finished1 = false;
        this.getAppointmentList();
      } else if (title == "已租赁") {
        this.l_leaseList=[];
        this.pageNum2 = 1;
        this.finished2 = false;
        this.getLeaseList();
      } else if (title == "我的出租") {
        this.l_myRentList=[];
        this.pageNum3 = 1;
        this.finished3 = false;
        this.getMyRentList();
      }
    },
    //跳转详情信息
    toRecordDetails(id) {
      this.$cookies.set("active", 2);
      this.$router.push({
        path: "/recordDetails",
        query: {
          product_id: id
        }
      });
    },
    //结束租赁
    async leaseOver(id) {
      //获取我的出租
      let params = {
        product_id: id
      };
      const res = await this.$axios.post(this.$api.cancelLease, params);
      if (res.success) {
        this.$toast(res.msg);
        this.getMyRentList();
      } else {
        this.$toast(res.msg);
      }
    },
    //获取已预约
    async getAppointmentList() {
      let params = {
        pageNum: this.pageNum1,
        pageSize: 10,
        user_id: this.user_id
      };
      const res = await this.$axios.post(this.$api.alreadyAppointment, params);
      if (res.success) {
        if (this.loading1) {
          // console.log(this._appointmentList);
          this.l_appointmentList = this.l_appointmentList.concat(res.data.list);
          this.appointmentList = res.data;
          this.appointmentList.list = this.l_appointmentList;
          if (this.l_appointmentList.length >= res.data.total||this.l_appointmentList.length==0) {
            this.finished1 = true;
          } else {
            this.pageNum1++;
          }
        } else {
          // if (this.l_appointmentList.length >= res.data.total) {
          //   this.finished1 = true;
          // }
          this.appointmentList = res.data;
        }

        this.appointmentList.list.forEach((item, index) => {
          item.goods_format = JSON.parse(item.goods_spec_format);
          item.create_time = item.create_time.split(" ")[0];
        });
        // console.log(this.appointmentList);
        this.isLoading1 = false;
        this.loading1 = false;
      } else {
        this.appointmentList = {};
        this.$toast(res.msg);
      }
    },
    //获取已租赁
    async getLeaseList() {
      let params = {
        pageNum: this.pageNum2,
        pageSize: 10,
        user_id: this.user_id
      };
      const res = await this.$axios.post(this.$api.alreadyLease, params);
      if (res.success) {
        if (this.loading2) {
          this.l_leaseList = this.l_leaseList.concat(res.data.list);
          this.leaseList = res.data;
          this.leaseList.list = this.l_leaseList;
          if (this.l_leaseList.length >= res.data.total) {
            this.finished2 = true;
          } else {
            this.pageNum2++;
          }
        } else {
          if (this.l_leaseList.length >= res.data.total) {
            this.finished1 = true;
          }
          this.leaseList = res.data;
        }
        this.leaseList.list.forEach((item, index) => {
          item.goods_format = JSON.parse(item.goods_spec_format);
          item.create_time = item.create_time.split(" ")[0];
        });
        // console.log(this.leaseList);
        this.isLoading2 = false;
        this.loading2 = false;
      } else {
        this.leaseList = {};
        this.$toast(res.msg);
      }
    },
    //获取我的出租
    async getMyRentList() {
      let params = {
        pageNum: this.pageNum3,
        pageSize: 10,
        user_id: this.user_id
      };
      const res = await this.$axios.post(this.$api.myFarmAndLand, params);
      if (res.success) {
        if (this.loading3) {
          this.l_myRentList = this.l_myRentList.concat(res.data.list);
          this.myRentList = res.data;
          this.myRentList.list = this.l_myRentList;
          if (this.l_myRentList.length >= res.data.total) {
            this.finished3 = true;
          } else {
            this.pageNum3++;
          }
        } else {
          if (this.l_myRentList.length >= res.data.total) {
            this.finished3 = true;
          }
          this.myRentList = res.data;
        }
        this.myRentList = res.data;
        this.myRentList.list.forEach((item, index) => {
          item.goods_format = JSON.parse(item.goods_spec_format);
          item.create_time = item.create_time.split(" ")[0];
        });
        console.log(this.myRentList);
        this.isLoading3 = false;
        this.loading3 = false;
      } else {
        this.myRentList = {};
        this.$toast(res.msg);
      }
    },
    onRefresh1() {
      this.l_appointmentList=[];
       this.pageNum1=1;
       this.finished1 = false;
      this.getAppointmentList();
    },
    onRefresh2() {
      this.l_leaseList = [];
            this.finished2 = false;
            this.pageNum2=1;
      this.getLeaseList();
    },
    onRefresh3() {
      this.l_myRentList =[];
            this.finished3 = false;
            this.pageNum3=1;
      this.getMyRentList();
    },
    onLoad1() {
      if (this.appointmentList.list && this.appointmentList.list.length > 0) {
        this.getAppointmentList();
      }
    },
    onLoad2() {
      if (this.leaseList.list && this.leaseList.list.length > 0) {
        this.getLeaseList();
      }
    },
    onLoad3() {
      if (this.myRentList.list && this.myRentList.list.length > 0) {
        this.getMyRentList();
      }
    }
  }
};
</script>

<style scoped>
.empty {
  padding: 0.3rem;
  text-align: center;
  font-size: 0.14rem;
  color: #999999;
}
.container {
  padding-bottom: 50px;
}
.content {
  width: 94%;
  border-radius: 10px;
  background: #fff;
  margin: 10px auto;
  padding: 0 16px 0 16px;
  box-sizing: border-box;
}
.top {
  width: 100%;
  padding: 10px 0;
  border-bottom: 2px solid #f7f7f7;
}
.top.finished {
  border-bottom: 0;
}
.top .img {
  width: 66px;
  height: 66px;
  border-radius: 5px;
  overflow: hidden;
  float: left;
}
.rent .top .img {
  width: 80px;
  height: 80px;
}
.top .img img {
  width: 100%;
  height: 100%;
}
.top .right_info {
  width: 100%;
  /* height: 66px; */
  padding-left: 80px;
  padding-top: 8px;
  box-sizing: border-box;
}
.rent .top .right_info {
  min-height: 80px;
  padding-left: 90px;
  padding-top: 0;
}

.right_info .name {
  color: #333;
  font-size: 15px;
}
.right_info .new_time {
  color: #333;
  font-size: 0.12rem;
  margin-top: 2px;
}
.name_b {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.name_b button {
  height: 0.24rem;
  border: 1px solid #f44736;
  font-size: 0.12rem;
  color: #f44736;
  padding: 0 0.06rem;
  border-radius: 0.05rem;
  min-width:.62rem;
}
.name_b button.fished {
  background: #e6e6e6;
  border: 1px solid #e6e6e6;
  color: #808080;
}
.right_info .durable_year {
  color: #f44736;
  font-size: 14px;
  margin-top: 2px;
}
.right_info .area {
  color: #333;
  font-size: 12px;
  margin-top: 2px;
}
.right_info .all_area {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width:100%;
}
.right_info .all_area .area:nth-of-type(1) {
  /* width: 60%; */
  border-right: 1px solid #f7f7f7;
}
.right_info .all_area .area:nth-of-type(2) {
  /* width: 40%; */
  text-align: right;
}
.right_info .area span {
  color: #f44736;
  font-size: 12px;
}
.bottom {
  font-size: 12px;
  color: #333;
  line-height: 34px;
  text-align: right;
  height: 34px;
}
.rent.bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.rent.bottom span:nth-of-type(2) {
  color: #999;
  display: flex;
  align-items: center;
}
.rent.bottom span:nth-of-type(1)::after {
  width: 6px;
  height: 6px;
  content: " ";
  border-radius: 100%;
  background-color: #f44;
  display: inline-block;
  margin-left: 4px;
}
</style>
<style>
.van-tabs__nav .van-tab--active {
  color: #01bf47;
}
.van-tabs .van-tabs__line {
  background-color: #01bf47;
}
.container .van-tabbar--fixed {
  border-top: 2px solid #ebebeb;
}
</style>
